<template>
  <div>
    <cs-table :table-data="currentTableData"
              :table-label="tableLabel"
              @handleButton="handleButton"
              @handleSortChange="handleSortChange"
              @handleSelectionChange="handleSelectionChange"
              :table-option="tableOption"
              :isSelection="false"
              class="table">
    </cs-table>
    <!-- 分页区域 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNo"
      :page-sizes="[20, 40, 50, 60]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
import CsTable from '@/components/cs-table'
export default {
  data() {
    return {
      currentTableData: [
        { time: '2019-05-06', name: '小龙龙', detail: '123', degree: 'III', IP: '192.168.32.14', source: '虚拟机' }
      ],
      tableLabel: [
        { label: '操作用户', param: 'time', align: 'center', sortable: true, isShow: true, width: '120' },
        { label: '源地址IP', param: 'name', align: 'center', isShow: true, width: '120' },
        { label: '变更时间', param: 'detail', align: 'center', sortable: false, isShow: true, width: '120' },
        { label: '原始信息', param: 'degree', align: 'center', sortable: false, isShow: true }
      ],
      tableOption: {
        label: '追溯',
        width: '120',
        options: [
          { label: '追溯', type: 'primary', size: 'mini', icon: 'el-icon-search', methods: 'audit', auth: 'sys:group:update' }
        ]
      },
      pageNo: 1,
      pageSize: 20,
      total: 0
    }
  },
  components: {
    CsTable
  },
  methods: {
    handleButton() {
    },
    handleSortChange() {
    },
    handleSelectionChange() {
    },
    // 分页监听
    handleSizeChange(newSize) {
      this.pageSize = newSize
    },
    handleCurrentChange(newPage) {
      this.pageNo = newPage
    }
  }
}
</script>

<style scoped>
  .table {
    margin: 10px 0;
  }
</style>
